panel: Move panel border into the background

In the mockups the bottom border of active panel buttons is drawn
on top of the panel's border. To get this effect, move the panel
border into the background, so that it is not subtracted from the
vertical space given to the buttons. Adjust the drawing of the rounded
corners to reflect that change.

https://bugzilla.gnome.org/show_bug.cgi?id=643001

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index f05d04ab3281237f2d741da80ca1648e9fddb1ec..08c85b775cdbfa10bd210407215a5df6f62d2736 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -187,8 +187,7 @@ StTooltip StLabel {
 #panel {
     color: #ffffff;
     background-color: black;
-    border: 0px solid #536272;
-    border-bottom-width: 1px;
+    border-image: url("panel-border.svg") 1;
 }
 
 #panelLeft, #panelCenter, #panelRight {

diff --git a/data/theme/panel-border.svg b/data/theme/panel-border.svg
new file mode 100644 (file)
index 0000000..4405ea2
--- /dev/null
+++ b/data/theme/panel-border.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="3"
+   height="10"
+   id="svg2"
+   version="1.1">
+  <defs
+     id="defs4" />
+  <metadata
+     id="metadata7">
+  </metadata>
+  <g
+     id="layer1">
+    <rect
+       style="fill:#000000;fill-opacity:1;stroke-width:0.43599999000000000;stroke-miterlimit:4;stroke-dasharray:none"
+       id="rect3779"
+       width="3"
+       height="10"
+       x="0"
+       y="0" />
+    <rect
+       style="fill:#536272;fill-opacity:1;stroke-width:0.43599999;stroke-miterlimit:4;stroke-dasharray:none"
+       id="rect3796"
+       width="3"
+       height="1"
+       x="0"
+       y="9" />
+  </g>
+</svg>

diff --git a/js/ui/panel.js b/js/ui/panel.js
index c331f4dff9a1f537be3cb89ab252a625e15e6b24..b6fbc62cd6e9de0a45bf054ae1d6206e2cfe2239 100644 (file)
--- a/js/ui/panel.js
+++ b/js/ui/panel.js
@@ -580,18 +580,19 @@ PanelCorner.prototype = {
         cr.moveTo(0, 0);
         if (this._side == St.Side.LEFT)
             cr.arc(cornerRadius,
-                   innerBorderWidth + outerBorderWidth + cornerRadius,
+                   innerBorderWidth + cornerRadius,
                    cornerRadius, Math.PI, 3 * Math.PI / 2);
         else
             cr.arc(0,
-                   innerBorderWidth + outerBorderWidth + cornerRadius,
+                   innerBorderWidth + cornerRadius,
                    cornerRadius, 3 * Math.PI / 2, 2 * Math.PI);
         cr.lineTo(cornerRadius, 0);
         cr.closePath();
 
         let savedPath = cr.copyPath();
 
-        let over = _over(outerBorderColor, backgroundColor);
+        let over = _over(innerBorderColor,
+                         _over(outerBorderColor, backgroundColor));
         Clutter.cairo_set_source_color(cr, over);
         cr.fill();
 
@@ -607,12 +608,12 @@ PanelCorner.prototype = {
         cr.restore();
 
         if (this._side == St.Side.LEFT)
-            cr.rectangle(cornerRadius - offset, 0, offset, innerBorderWidth);
+            cr.rectangle(cornerRadius - offset, 0, offset, outerBorderWidth);
         else
-            cr.rectangle(0, 0, offset, innerBorderWidth);
+            cr.rectangle(0, 0, offset, outerBorderWidth);
         cr.fill();
 
-        offset = innerBorderWidth + outerBorderWidth;
+        offset = innerBorderWidth;
         Clutter.cairo_set_source_color(cr, backgroundColor);
 
         cr.save();
@@ -627,16 +628,15 @@ PanelCorner.prototype = {
 
         let cornerRadius = node.get_length("-panel-corner-radius");
         let innerBorderWidth = node.get_length('-panel-corner-inner-border-width');
-        let outerBorderWidth = node.get_length('-panel-corner-outer-border-width');
 
         this.actor.set_size(cornerRadius,
-                            innerBorderWidth + outerBorderWidth + cornerRadius);
+                            innerBorderWidth + cornerRadius);
         if (this._side == St.Side.LEFT)
             this.actor.set_position(Main.panel.actor.x,
-                                    Main.panel.actor.y + Main.panel.actor.height - innerBorderWidth - outerBorderWidth);
+                                    Main.panel.actor.y + Main.panel.actor.height - innerBorderWidth);
         else
             this.actor.set_position(Main.panel.actor.x + Main.panel.actor.width - cornerRadius,
-                                    Main.panel.actor.y + Main.panel.actor.height - innerBorderWidth - outerBorderWidth);
+                                    Main.panel.actor.y + Main.panel.actor.height - innerBorderWidth);
     }
 };